<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				margin: 100px auto;
				transition: .2s;
				
				/*变形的原点 默认值center*/
				transform-origin: 20px 20px;
			}
			
			.box1:hover{
				/*
				 scaleX（）水平方向缩放
				 scaleY（）垂直方向缩放
				 scale（）双方向缩放*/
				transform: scale(1.2);
			}
			
			.img-wrapper{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				margin:0 auto;
				overflow: hidden;
				
			}
			
			img{
				width: 100%;
				transition: .2s;
				
			}
			
			.img-wrapper:hover img{
				transform: scale(1.2);
			}
		</style>
		
	</head>
	<body>
		<div class="box1"></div>
		<div class="img-wrapper">
			<img src="../img/dl.jpg" alt="" />
		</div>
	</body>
</html>
